import {componentConfGroup, ComponentConfType} from "../../../components/QuestionComponents";
import {Typography} from "antd";
import styles from './ComponentLib.module.scss'
import {useDispatch} from "react-redux";
import {addComponent} from "../../../store/componentsReducer";
import {nanoid} from "@reduxjs/toolkit";
import {useCallback} from "react";

const {Title} = Typography




export const ComponentLib = () => {
    const dispatch = useDispatch()
    function genComponent(c: ComponentConfType) {
        const {title, type, Component, defaultProps} = c;

        // const handleClick = useCallback(()=>{
        //     dispatch(addComponent(
        //         {
        //             fe_id: nanoid(),
        //             title,
        //             type,
        //             props: defaultProps
        //         }
        //     ))
        // },[])
        function handleClick() {
            dispatch(addComponent(
                {
                    fe_id: nanoid(),
                    title,
                    type,
                    props: defaultProps
                }
            ))
        }
        return (
            <div key={type} className={styles.wrapper} onClick={handleClick}>
                <div className={styles.component}>
                    <Component></Component>
                </div>
            </div>
        )
    }
    return (
        <div>
            {
                componentConfGroup.map((group, index) => {
                    const {groupName, components} = group
                    return (
                        <div key={index}>
                            <Title level={3}
                                   style={{fontSize: '16px', marginTop: index > 0 ? '20px' : 0}}>{groupName}</Title>
                            <div>{components.map(c => genComponent(c))}</div>
                        </div>
                    )
                })
            }
        </div>
    );
};